<template>
    <div class="info-group" :class="{'isOpen': openBody}">
        <div class="info-head" @click="handleOpen">
            <div class="info-title">{{ headline }}</div>
            <i class="open-icon el-icon-caret-top" />
        </div>
        <el-collapse-transition>
            <div v-show="openBody" class="info-body">
                <slot />
            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

/**
 * @desc 编辑内容页展开组
 */
export default {
    name: 'InfoGroup',
    props: {
        headline: {
            type: String,
            default: ''
        }
    },
    data: function() {
        return {
            openBody: true
        };
    },
    computed: {
        ...mapGetters([
            'language'
        ])
    },
    methods: {
        handleOpen() {
            this.openBody = !this.openBody;
        }
    }
};
</script>

<style lang="scss" scoped>
/*展开信息栏*/
.info-group{
    margin-bottom: 12px;
    .info-head{
        width: calc(100% + 40px);
        padding: 6px 20px;
        margin-left: -20px;
        display: flex;
        align-items: center;
        background-color: #f4f4f4;
        cursor: pointer;
        .info-title{
            font-size: 22px;
        }
        .open-icon{
            display: block;
            margin-left: auto;
            transition: .3s;
        }
    }

    &.isOpen{
        .info-head{
            .open-icon{
                transform: rotate(180deg);
            }
        }
    }
}
</style>
